<template>
  <div class="box">
    <div class="box_top">
      <XcTop :option-list="optionList" :menu-list="menuList" />
    </div>
    <div class="box_bot">
      <XcMain :option-list="optionList" :menu-list="menuList" />
    </div>
  </div>
</template>
<script>
import XcTop from '@/views/XCTown/components/Top';
import XcMain from '@/views/XCTown/components/Main';
// import { getQueryBodyByProduce } from '@/api/dynamicInterface';
import { findHomePageImages } from '@/api/file/index';
import { getLocalStorage } from '@/utils/commonMethods';
export default {
  components: {
    XcTop,
    XcMain
  },
  data() {
    return {
      optionList: []
    };
  },
  computed: {
    menuList() {
      return this.$store.state.permission.menuList;
    }
  },
  created() {
    this.getTownList();
  },
  methods: {
    getTownList() {
      findHomePageImages({
        appId: getLocalStorage('appId'),
        optionId: getLocalStorage('pcUrl')
      }).then(res => {
        if (res.success) {
          this.optionList = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.box {
  height: 100%;
  padding: 0 px2vw(24px) px2vw(24px);
  background: rgba(91, 143, 249, 0.07);
}
.box_top {
  height: 8%;
}
.box_bot {
  height: 92%;
}
</style>
